<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表渲染</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- item是遍历出来的对象 index是索引 -->
				<li v-for="item in userList">{{ item }}</li>
			</ul>
			<ul>
				<!-- item是遍历出来的对象 index是索引 -->
				<li v-for="item of userList">{{ item }}</li>
			</ul>
			<ul>
				<!-- item是遍历出来的对象 index是索引 -->
				<li v-for="(item,index) in userList">{{ index }}{{ item }}</li>
			</ul>
			<ul>
				<li v-for="(item,index) in userObjList">
					{{ item.username }}{{ item.age }}
				</li>
			</ul>
			<h4 v-for="(item,key,index) of nameObj">
				item :{{ item }} key :{{ key }} index :{{ index }}
			</h4>
		</div>
		
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{//目前是写死的，后续会从接口获取
					userList:['张三','李四','王五','赵六'],
					userObjList:[
						{username:'张三',age:18},
						{username:'李四',age:19},
						{username:'王五',age:20}
					],
					nameObj:{
						name:'张三',
						age:18,
						sex:'男'
					}
				}
			})
		</script>
	</body>
</html>
